<template>
  <div class="sousuo">
    <div class="booktop">
      <div class="top">
        <div class="top1">
          <div class="imgs" @click="toindex()">
            <img src="../../assets/images/logon.png" alt="" />
          </div>
          <div class="lefts" @click="toindex()">
            <div></div>
            <div class="lefts1">浙江省非物质文化<br />数字文献中心</div>
            <div class="lefts2">
              ZhejiangProvinceIntangibleCultureDigitalLiteratureCenter
            </div>
          </div>
          <div class="rights">
            <div></div>
            <usertbtn></usertbtn>
            <div class="ris3">
              <el-form
                :inline="true"
                :model="formInline"
                class="demo-form-inline"
                style="width: 100%; display: flex; height: 56px"
              >
                <el-form-item
                  style="width: 382px; height: 56px; margin-bottom: 0"
                >
                  <el-input
                    v-model="formInline.user"
                    placeholder="输入关键词搜索"
                    style="width: 382px; height: 56px"
                    @keyup.enter.native="sousuo()"
                  >
                    <img
                       @click="sousuo()"
                      slot="append"
                      src="../../assets/images/sousuo.png"
                      alt=""
                    />
                  </el-input>
                </el-form-item>
                <el-form-item>
                  <div style="padding-left:20px;margin-top: 7px;cursor: pointer;" @click="onSubmit()">
                    <div style=" display: flex;align-items: center;height:100%;font-size: 18px;font-family: Source Han Sans CN-Regular, Source Han Sans CN;font-weight: 400;color: #911f23">高级检索 <i style="font-size:18px;font-weight:550" class="el-icon-arrow-right"></i></div>
                </div>
                </el-form-item>
              </el-form>
            </div>
          
          </div>
        </div>
      </div>
      <div class="navs">
        <div class="navs1" v-for="(item,index) in navslist" :key="item.id" :class="item.id == actives?'active':''" @click="totab(item.id,item.path)"> 
            <el-dropdown trigger="click" @command="handleCommand">
            <span class="el-dropdown-link" style="display: flex;flex-direction: column;align-items: center;">
                <div>{{item.name}}</div>
                <i v-if="index<=4" class="el-icon-caret-bottom el-icon-caret-top"></i>
            </span>
            <el-dropdown-menu slot="dropdown" >
                <el-dropdown-item :command="item1.id" v-for="(item1,index1) in item.children" :key="item1.id">{{item1.names}}</el-dropdown-item>
               
            </el-dropdown-menu>
            </el-dropdown>
        </div>
        
      </div>
    </div>
    <router-view/>
    <footbtn></footbtn>
  </div>
</template>
<style scoped  lang="scss">
::v-deep .el-input {
  display: flex;
  justify-content: center;
  color: #333333;
}
::v-deep .el-input--prefix .el-input__inner {
  width: 305px;
  border: 0px;
}
//搜索框
::v-deep .el-input-group > .el-input__inner {
  height: 56px;
  border: 0px;
}
::v-deep .el-input-group__append {
  border: none !important;
  background-color: #fff;
  padding: 0 45px 0 10px;
}
::v-deep .el-input-group__append img {
  width: 32px;
  height: 32px;
  padding-top: 12px;
  cursor: pointer;
}
::v-deep .el-button--primary {
  background-color: #911f23;
  border-color: #911f23;
  border-radius: 8px;
  height: 56px;
  width: 112px;
  margin-left: 16px;
}
::v-deep .el-form--inline .el-form-item {
  margin-right: 0;
}
::v-deep .el-divider--vertical {
    // height: 40px;
    background-color: #999999;
}
::v-deep .el-dropdown-menu{
    width: 130px;
}

    .sousuo{
        width: 100%;
        .booktop {
            width: 100%;
            height: 278px;
            background: url("../../assets/images/booktop.png") no-repeat;
            background-size: 100% 100%;
            .top {
            width: 1400px;
            height: 176px;
            margin: 0 auto;
            // background-color: #F7F7F8;
            .top1 {
                position: relative;
                width: calc(100% - 0px);
                margin: 0 auto;
                height: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                // background-color: pink;
                .imgs {
                position: absolute;
                top: 0;
                width: 138px;
                height: 176px;
                z-index: 100;
                cursor: pointer;
                img {
                    width: 100%;
                    height: 100%;
                }
                }
                .lefts {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                height: 100%;
                margin-left: 170px;
                cursor: pointer;
                .lefts1 {
                    font-size: 24px;
                    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
                    font-weight: 400;
                    color: #333333;
                    // line-height: 35px;
                }
                .lefts2 {
                    font-size: 14px;
                    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
                    font-weight: 400;
                    color: #666666;
                    padding-bottom: 12px;
                }
                }
                .rights {
                position: relative;
                display: flex;
                flex-direction: column;
                align-items: flex-end;
                justify-content: space-between;
                // padding-bottom: 40px;
                height: 100%;
               
             
                .ris3 {
                    // width: 362px;
                    // margin-top: 37px;
                }
                .ri {
                    padding-right: 30px;
                }
                .ri1 {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 68px;
                    height: 38px;
                    background: #911f23;
                    border-radius: 8px 8px 8px 8px;
                    opacity: 1;
                    color: #fff;
                    cursor: pointer;
                }
                }
            }
            }
            .navs{
                width: 1400px;
                height: 76px;
                display: flex;
                align-items: center;
                justify-content: space-around;
                margin: 30px auto 0;
                .navs1{
                    width: 175px;
                    height: 72px;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    cursor: pointer;
                    .el-dropdown-link{
                        font-size: 18px;
                        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
                        font-weight: 400;
                        color: #333333;
                        
                    }
                }
                .active{
                    background-color: #ffff;
                }
            }
        }
    }
  
</style>

<script>
import footbtn from '../../components/foot/index.vue'
import usertbtn from "../../components/user/index.vue";
 import { getdiqu  } from "@/api/api.js"; 
export default {
  data(){
    return{
        actives:0,
       
        formInline: {
            user: "",
        },
        navslist:[
            {
                id:0,name:'全部',path:'/s1',
                children:[
                   
                ]
            },
            {
                id:1,name:'数字档案',path:'/s2',
                children:[
                    // {id:0,names:'普查文献'}
                ]
            },
             {
                id:2,name:'集成志书',path:'/s5',
                children:[
                    // {id:0,names:'普查文献'}
                ]
            },
             {
                id:3,name:'音像资料',path:'/s6',
                children:[
                    // {id:0,names:'普查文献'}
                ]
            },
             {
                id:4,name:'理论研究',path:'s7',
                children:[
                    // {id:0,names:'普查文献'}
                ]
            },
            
        ],
        gglx:0
    }
  },
  created(){
     this.actives = sessionStorage.getItem('erjsnav')?sessionStorage.getItem('erjsnav'):0
     this.formInline.user = sessionStorage.getItem("sousuo")
     this.gglx =  sessionStorage.getItem('gglx')
    
  
  },
  mounted(){
    // this.drawChart()
  },
  methods:{
    
    sousuo(){
      sessionStorage.setItem("sousuo",this.formInline.user);
      if(this.actives == 2){
        
        this.$router.push({
        path: '/s5',
        query: {
          mc: this.formInline.user
        }
      })
      this.$router.go(0)
      }else if(this.actives == 0){
        this.$router.push({
        path: '/s1',
        query: {
          mc: this.formInline.user
        }
        
      })
      this.$router.go(0)
      }else if(this.actives == 1){
        this.$router.push({
        path: '/s2',
        query: {
          mc: this.formInline.user
        }
      })
      this.$router.go(0)
      }else if(this.actives == 3){
        this.$router.push({
        path: '/s6',
        query: {
          mc: this.formInline.user
        }
      })
      this.$router.go(0)
      }else if(this.actives == 4){
        this.$router.push({
        path: '/s7',
        query: {
          mc: this.formInline.user
        }
      })
      this.$router.go(0)
      }
      
     
    },
    toindex(){
      sessionStorage.setItem("ids",0)
      this.$router.push('/index');
    },
    totab(id,url){
        
        if(this.gglx == 1){
          sessionStorage.setItem("bookdangxiang",1)
        }else{
          sessionStorage.setItem("bookdangxiang",0)
        }
        let arr = []
        sessionStorage.setItem("pcnfs",arr)
        sessionStorage.setItem("sjnf",arr)
        sessionStorage.setItem("yxsjnf",arr)
        sessionStorage.setItem("lilunsjnf",arr)
        this.actives = id
        this.$router.push(url);
        sessionStorage.setItem("erjsnav",id)
        if(this.actives == 0){
          console.log(this.formInline.user,'111')
          if(this.formInline.user=='' || this.formInline.user ==null){
            console.log('1112')
            sessionStorage.setItem("ids",0)
            this.$router.push('/index');
          }
        }
        
    },
    handleCommand(e,row){
    },
    onSubmit(){
      sessionStorage.setItem("erjsnav", 0);
      this.$router.push('/retrieval');
    }
   
  },
  computed:{
　　
},
  components: {
      footbtn,
      usertbtn
  }
}
</script>
